<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '收货地址',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1">
      <wd-navbar>
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">收货地址</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-y-32 home-content">
        <view
          class="ps-t-32 p-x-28"
          :class="{ 'bg-blue-bg': selectItem === item.id }"
          v-for="(item, index) in addressList"
          :key="index"
          @click="selectItem = item.id"
        >
          <view class="text-gray-333 font-size-32 font-500 line-h-44">
            <text>{{ item.name }}</text>
            <text class="mg-l-32">{{ item.phone }}</text>
          </view>
          <view class="font-size-24 text-gray-999 line-h-34 font-400 mg-t-24">
            <text>{{ item.address }}</text>
          </view>
          <view class="flex justify-between items-center w-full mg-t-32">
            <view class="flex justify-start items-center">
              <view
                class="wr-32 hr-32 b-rd-26 b-solid-#999-4 pos-relative border-box"
                @click="checkedChange(item, index)"
              >
                <view
                  class="pos-absolute pos-left--4 pos-top--4 wr-32 hr-32 b-rd-26 flex justify-center items-center"
                  v-if="item.isDefault"
                >
                  <image width="100%" height="100%" :src="checkedImg" />
                </view>
              </view>
              <view class="mg-l-20 font-400 text-gray-333 font-size-28 line-h-40">
                设为默认地址
              </view>
            </view>
            <view class="flex justify-start items-center">
              <view class="wr-112 hr-52 mg-r-20">
                <wd-button size="small" plain @click="editAddress(item)">修改</wd-button>
              </view>
              <view class="wr-112 hr-52 mg-r-20">
                <wd-button size="small" plain type="info" @click="deleteAddress(item)">
                  删除
                </wd-button>
              </view>
            </view>
          </view>
          <view class="w-full hr-2 bg-#F5F5F5 mg-t-32"></view>
        </view>
      </view>
      <view
        class="w-full hr-112 bg-white pos-absolute pos-bottom-0 pos-left-0 flex justify-center items-center bdr-top-2-#F5F5F5 border-box"
      >
        <view class="wr-694 hr-88 flex justify-between items-center">
          <view class="wr-194 h-full" v-if="IsSelect">
            <wd-button type="success " size="warning" @click="submitUpdate">
              <text class="font-size-32 font-500">提交修改</text>
            </wd-button>
          </view>
          <view class="wr-490 h-full" :class="{ 'wr-690': !IsSelect }">
            <wd-button size="small" type="primary" @click="handleAddress">
              <text class="font-size-32 font-500">新增地址</text>
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getAddressList, updateAddress } from '@/service/my/my'

defineOptions({
  name: 'ShareLedger',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const checkedImg = ref('/static/images/components/check.png')
const checkedChange = (item: any, i: number) => {
  const setChecked = () => {
    item.type = 2
    updateAddress(item).then(() => {
      uni.showToast({
        title: '设置成功',
        icon: 'none',
        duration: 2000,
      })
      getData()
    })
  }
  uni.showModal({
    content: '确认设为默认地址吗？',
    success: (res: any) => {
      if (res.confirm) {
        uni.showToast({
          title: '设定成功',
          icon: 'none',
          duration: 1000,
        })
        setChecked()
      }
    },
  })
}
const addressList = ref([])
const handleAddress = () => {
  uni.setStorageSync('editAddress', '{}')
  uni.navigateTo({
    url: '/pages/location/addLocation',
  })
}
const pagesBack = () => {
  uni.navigateBack()
}
onLoad(() => {})
const IsSelect: any = ref(false)
const selectItem: any = ref(null)
onShow(() => {
  const param: any = uni.getStorageSync('chooseAddress')
  if (param) {
    const paramObj: any = JSON.parse(param)
    if (paramObj.chooseAddress) {
      IsSelect.value = paramObj.chooseAddress
      selectItem.value = paramObj.addressId
    }
  }
  getData()
})
const getData = () => {
  getAddressList().then((res: any) => {
    const data: any = res.data
    if (data.length > 0) {
      data.map((m: any) => {
        m.address = m.province + ' ' + m.city + ' ' + m.district + ' ' + m.address
        m.isDefault = m.is_default !== 0
        return m
      })
      addressList.value = data
    }
  })
}
const editAddress = (item: any) => {
  const data: any = JSON.stringify(item)
  uni.setStorageSync('editAddress', data)
  uni.navigateTo({
    url: '/pages/location/addLocation',
  })
}
const deleteAddress = (item: any) => {
  const deleteData = (item: any) => {
    item.type = 1
    updateAddress(item).then(() => {
      uni.showToast({
        title: '删除成功',
        icon: 'none',
        duration: 2000,
      })
    })
  }
  uni.showModal({
    content: '确定删除该地址吗？',
    success: (res: any) => {
      if (res.confirm) {
        deleteData(item)
        getData()
      }
    },
  })
}
const submitUpdate = () => {
  console.log(selectItem.value)
  uni.setStorageSync(
    'chooseAddress',
    JSON.stringify({ chooseAddress: IsSelect.value, addressId: selectItem.value }),
  )
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  font-size: 32rpx !important;
  color: #312f2a !important;
}
</style>
